<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-02 11:09:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-02 11:49:32
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <button id="mybtn">点我操作</button>
    <script>    
        // 浏览器的内存 和 硬盘的 一个合作 

        // storage 
        // 本地存储   
        // localstorage
        // 一旦存储 永久存在 
        // 可以进行页面之间的通讯  其它页面可以拿到你这个页面的数据 
        // 注意同一个域名下  
        // 基本类型  不能复杂类型 
        // 如果非要存复杂类型 转成json 格式
        // 操作:

        // 增
        // window.localStorage.setItem(key,value);

        // //删
        // window.localStorage.removeItem(key);
        // window.localStorage.clear();
        // 清空以后键值对就在了  
        // //改  对已经存在的键 重新赋值
        // window.localStorage.setItem(key,value);

        // //查 
        // window.localStorage.getItem(key);
        // 如果没有这个键 返回 null 

        




        // 会话存储 
        // sessionstorage

        // 临时存储   
        // 会话结束 也就是关闭浏览器之后 内容自动消失  
        // 只能基本类型的数据 复杂数据类型需要转成json格式 
        // 可以跨页面通讯 但是要求其他页面必须从这个页面跳转过去的

        // cookie


        var btn = document.getElementById('mybtn');

        btn.onclick = function(){
            // window.localStorage.setItem('one',1000);
            // window.localStorage.setItem('two',2000);
            // window.localStorage.setItem('three',3000);

            // var res = window.localStorage.getItem('three');
            // console.log(res); 3000 

            // window.localStorage.removeItem('three');
            // var res = window.localStorage.getItem('three');
            // console.log(res); // null 
            // window.localStorage.clear();


            // window.localStorage.setItem('person',{'name':'张三','age':18});
            // 存进去 [object Object]
            // var res = window.localStorage.getItem('person');
            // console.log(res); // 取出来也是[object Object]

            // window.localStorage.setItem('person',JSON.stringify({'name':'张三','age':18}));
            // var res = window.localStorage.getItem('person');
            // console.log(res);


            // 会话存储   
            window.sessionStorage.setItem('person1',JSON.stringify({'name':'赵四','age':18}));
            window.sessionStorage.setItem('person2',100);
            window.sessionStorage.setItem('person3','hello');
            //删除
            // window.sessionStorage.removeItem('person1');

            // 
            // var res = window.sessionStorage.getItem('person2');
            // console.log(res);
            // window.sessionStorage.clear();
            //  var res = window.sessionStorage.getItem('person3');
            //  console.log(res);
            
            window.location.href = './test.html'

            // 只有从它跳过去的页面 才能拿到 sessionstorage中的值 
        // 增


            
        }
    </script>
</body>
</html>